<template>
  <div class="login-page">
  	<div class="login-logo" id="login" v-bind:style="{ display: activedisplay_login}">
  		<div class="login-img">
        安全履职能力评测系统
  			<!--<img src="../../../static/login_sjz.png" alt/>-->
  		</div>
  		<div class="login-form" >
  			<div class="login-content">
  				<div>
  					<!-- <input type="hidden" name="wx-appid" value id="wx_appid"/> -->
  					<div class="form-group">
  						<div class="input-group">
  							<i class="entypo-user ifont"></i>
  							<input v-model="loginForm.account" type="text" class="form-control longin-in-box" placeholder="工号/邮箱/手机号" autocomplete="off"/>
  						</div>
  					</div>
  					<div class="form-group">
  						<div class="input-group">
  							<i class="entypo-key ifont"></i>
  							<input v-model="loginForm.password" type="password" class="form-control longin-in-box" placeholder="密码" autocomplete="off"/>
  						</div>
  					</div>
  					<div class="form-group stactname">
  						<span class="checkbox span_left" @click="to_register">
  							注册
  						</span>
  						<a href="#" class="forget_pwd" style="display: block;" @click="forget_pwd">忘记密码?</a>
  					</div>
  					<button @click="login" class="btn-primary">登录</button>
  				</div>
  			</div>
  		</div>

   	</div>
   	<div class="register-logo" id="register" v-bind:style="{ display: activedisplay_register}">
  		<div class="login-img">
  			安全履职能力评测系统
  		</div>
  		<div class="register-form" >
  			<div class="register-content">
  				<div>
  					<!-- <input type="hidden" name="wx-appid" value id="wx_appid"/> -->
  					<div class="form-group">
  						<div class="input-group">
  							<i class="entypo-user ifont"></i>
  							<input v-model="registerForm.username" type="text" class="form-control longin-in-box" placeholder="姓名" autocomplete="off"/>
  						</div>
  					</div>
  					<div class="form-group">
  						<div class="input-group">
  							<i class="entypo-mobile ifont"></i>
  							<input v-model="registerForm.name" type="text" class="form-control longin-in-box" placeholder="手机号" autocomplete="off"/>
  						</div>
  					</div>
  					<div class="form-group">
  						<div class="input-group  lx_inp">
  							<i class="entypo-user ifont"></i>
  							<!--<input v-model="loginForm.account" type="text" class="form-control longin-in-box" placeholder="工号/邮箱/手机号" autocomplete="off"/>-->
  							<el-select v-model="registerForm.type" placeholder="请选择" popper-class="reg_inp">
							    <el-option
							      v-for="item in options"
							      :key="item.value"
							      :label="item.label"
							      :value="item.value">
							    </el-option>
							  </el-select>
  						</div>
  					</div>
  					<div class="form-group">
  						<div class="input-group">
  							<i class="entypo-key ifont"></i>
  							<input v-model="registerForm.password" type="password" class="form-control longin-in-box" placeholder="密码" autocomplete="off"/>
  						</div>
  					</div>
  					<div class="form-group">
  						<div class="input-group">
  							<i class="entypo-key ifont"></i>
  							<input v-model="registerForm.password_confirmation" type="password" class="form-control longin-in-box" placeholder="确认密码" autocomplete="off"/>
  						</div>
  					</div>
  					<div class="form-group stactname">
  						<span class="checkbox span_left" @click="cancel_register">
  							登录
  						</span>
  						<!--<a href="#" class="forget_pwd" style="display: block;">忘记密码?</a>-->
  					</div>
  					<button @click="register" class="btn-primary">注册</button>
  				</div>
  			</div>
  		</div>
  	</div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
			activedisplay_login:'block',
			activedisplay_register:'none',

      loginForm: {
        account: '',
        password: ''
      },
      registerForm:{
      	name:'',
      	username:'',
      	password:'',
      	password_confirmation:'',
      	type:''
      },
       options: [{
          value: 'visitor',
          label: '访客'
        }, {
          value: 'vendor',
          label: '承包商'
        }],
        value: ''
    }
  },
  methods: {
    login () {
      if (this.loginForm.account && this.loginForm.password) {
        let loading = this.$loading({lock: true, text: `登陆中`})
        this.$API.login(this.loginForm.account, this.loginForm.password)
        .then(data => {

          window.localStorage.setItem('userinfo', JSON.stringify(data))
           loading.close()
          this.$message.success(`登陆成功`)

          this.$router.push('/home')

        })
        loading.close()
      } else {
        this.$message.info(`请输入完整的账号或密码`)
      }
    },
    forget_pwd(){
    	this.$message.success(`请联系管理员`);
    },
    to_register(){
    	this.activedisplay_login='none';
    	this.activedisplay_register='block';
    },
    cancel_register(){

    	this.activedisplay_register='none';
    	this.activedisplay_login='block';
    },
    register(){
    	let reg_info=this.registerForm;

    	if(!(/^1[34578]\d{9}$/.test(reg_info.name))){
				        alert("手机号码有误，请重填");
				        return false;
				   }
			if(reg_info.type==''){
				 alert("未选择访问类型，请选择");
				        return false;
			}
			if(reg_info.password==''||reg_info.password_confirmation==''){
				 alert("密码未填完，请续填");
				        return false;
			}
				if(reg_info.password!=reg_info.password_confirmation){
				 alert("两次密码未相同，请重填");
				        return false;
			}
				console.log(reg_info.username)
    	this.$API.Register({name:reg_info.name,username:reg_info.username,password: reg_info.password,password_confirmation:reg_info.password_confirmation,type:reg_info.type})
    	.then(data => {
////        loading.close()
          this.$message.success(`注册成功`)
          this.activedisplay_login='none';
    			this.activedisplay_register='block';
////        this.$router.push('/home')
        })
        .catch(errmsg => {
//        loading.close()
          this.$message.error(errmsg);
        })
    },
//  toRegister () {
//    this.$router.push('/register')
//  }
  }
}
</script>

<style>
html, body, #app {
  height: 100%;
}
.login-page {
  text-align: left;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  /*background-image: url(../../assets/login-bg.png);*/
  background-image: url(/static/dichen.png);
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  position: fixed;
  top: 0;
  bottom: 0;
}
.login-page .login-logo{width: 400px;height: 305px; margin: auto;position: absolute;border-radius: 5px;z-index: 6;background: #fff;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -150px;
}
.login-page .register-logo{
  width: 400px;
  height: 450px;
  margin: auto;
  position: absolute;
  border-radius: 5px;
  z-index: 6;
  background: #fff;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -220px;
}
.login-page .login-img{padding: 24px 0 40px 0;text-align: center;font-size: 20px ;color: #79614F;font-weight:bold ;}
.login-page  .login-form{width: 80%;margin: 0 auto;}
.login-page  .register-form{width: 80%;margin: 0 auto;}
.login-page .form-group{margin-bottom: 15px;}
.login-page .input-group{
  background: #fff;
  border: 1px solid #79614f;
  width: 100%;
  border-radius: 30px;
  height: 35px;
  overflow: hidden;
  margin: 0 auto;
}
.login-page .input-group .ifont{ display: inline-block; padding-left: 16px; color: #79614F;line-height: 35px;}
.login-page .form-group .form-control{ background-color: #ffffff !important; border-width: 0px !important; display: inline-block;width: 75%;}

.login-page .form-group .form-control:-webkit-autofill,
.login-page .form-group .form-control:-webkit-autofill:hover,
.login-page .form-group .form-control:-webkit-autofill:focus {
  box-shadow:0 0 0 60px #ffffff inset;
}
.login-page .form-group .form-control:focus{ outline: 0px !important; }
.login-page .form-group .el-checkbox__input.is-checked+.el-checkbox__label{ color: #63c6ae !important;}
.login-page .form-group .el-checkbox__inner{ border-color:#63C6AE !important; }
.login-page .el-checkbox__input.is-checked .el-checkbox__inner{background-color: #63C6AE !important;}
.login-page .form-group a{ color: #373e4a; font-size: 14px; display: inline-block; float: right; text-decoration: none; }
.login-page .form-group a:hover{color: #79614F; text-decoration: underline;}
.login-page  .btn-primary{
  width: 100%;
  height: 32px;
  text-align: center!important;
  border-radius: 25px;
  line-height: 10px;
	color: #ffffff;
  display: inline-block;
  outline: none;

  background: #79614f!important;
  border: 1px solid #79614f!important;
  /*margin-top: 28px;*/

  cursor: pointer;
}
.reg_inp .el-select-dropdown__item.selected{color: #79614F !important; }
.reg_inp .el-select-dropdown__item.hover{color: #79614F !important; }
.lx_inp input{border-width: 0px !important;padding-left: 0px !important;color: #757575 !important;    width: 270px !important;}
.span_left{cursor: pointer;    color: #373e4a;font-size: 14px;margin-left: 20px;}
.span_left:hover{    color: #79614F;text-decoration: underline;}
</style>
